<script setup lang="ts">
import { reactive, ref } from 'vue';

import { Page } from '@vben/common-ui';

import {
  Breadcrumb,
  BreadcrumbItem,
  Button,
  DatePicker,
  Radio,
  RadioGroup,
  Table,
} from 'ant-design-vue';
import dayjs from 'dayjs';
import { Download, Printer } from 'lucide-vue-next';

interface BalanceSheetRecord {
  assetBeginningBalance: null | number;
  assetEndingBalance: null | number;
  assetItem: string;
  assetLineNumber: string;
  isDetailRow?: boolean;
  isGroupRow?: boolean;
  key: string;
  liabilityBeginningBalance: null | number;
  liabilityEndingBalance: null | number;
  liabilityItem: string;
  liabilityLineNumber: string;
}

interface QueryForm {
  accountingPeriod: dayjs.Dayjs | null;
  reclassification: string;
}

// 查询表单数据
const queryForm = reactive<QueryForm>({
  accountingPeriod: dayjs('2025-01'),
  reclassification: 'reclassified', // 'reclassified' | 'not-reclassified'
});

// 表格列配置
const columns = [
  {
    title: '资产',
    dataIndex: 'assetItem',
    key: 'assetItem',
    width: 200,
    align: 'left' as const,
  },
  {
    title: '行次',
    dataIndex: 'assetLineNumber',
    key: 'assetLineNumber',
    width: 80,
    align: 'center' as const,
  },
  {
    title: '期末余额',
    dataIndex: 'assetEndingBalance',
    key: 'assetEndingBalance',
    width: 120,
    align: 'right' as const,
  },
  {
    title: '年初余额',
    dataIndex: 'assetBeginningBalance',
    key: 'assetBeginningBalance',
    width: 120,
    align: 'right' as const,
  },
  {
    title: '负债和所有者权益',
    dataIndex: 'liabilityItem',
    key: 'liabilityItem',
    width: 200,
    align: 'left' as const,
  },
  {
    title: '行次',
    dataIndex: 'liabilityLineNumber',
    key: 'liabilityLineNumber',
    width: 80,
    align: 'center' as const,
  },
  {
    title: '期末余额',
    dataIndex: 'liabilityEndingBalance',
    key: 'liabilityEndingBalance',
    width: 120,
    align: 'right' as const,
  },
  {
    title: '年初余额',
    dataIndex: 'liabilityBeginningBalance',
    key: 'liabilityBeginningBalance',
    width: 120,
    align: 'right' as const,
  },
];

// 资产负债表数据
const balanceSheetData = ref<BalanceSheetRecord[]>([
  {
    key: '1',
    assetItem: '流动资产:',
    assetLineNumber: '',
    assetEndingBalance: null,
    assetBeginningBalance: null,
    liabilityItem: '流动负债:',
    liabilityLineNumber: '',
    liabilityEndingBalance: null,
    liabilityBeginningBalance: null,
    isGroupRow: true,
  },
  {
    key: '2',
    assetItem: '货币资金',
    assetLineNumber: '1',
    assetEndingBalance: 1_500_000,
    assetBeginningBalance: 1_200_000,
    liabilityItem: '短期借款',
    liabilityLineNumber: '31',
    liabilityEndingBalance: 500_000,
    liabilityBeginningBalance: 600_000,
    isDetailRow: true,
  },
  {
    key: '3',
    assetItem: '应收账款',
    assetLineNumber: '2',
    assetEndingBalance: 800_000,
    assetBeginningBalance: 750_000,
    liabilityItem: '应付票据',
    liabilityLineNumber: '32',
    liabilityEndingBalance: 200_000,
    liabilityBeginningBalance: 150_000,
    isDetailRow: true,
  },
]);

// 格式化金额
const formatAmount = (amount: number | null): string => {
  if (amount === null || amount === 0) return '';
  return amount.toLocaleString('zh-CN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  });
};

// 事件处理函数
const handleBackToWorkspace = () => {
  // 返回工作台
};

const handlePrint = () => {
  // 打印资产负债表
};

const handleDownload = () => {
  // 下载资产负债表
};

const handleQuery = () => {
  // 查询资产负债表
};
</script>

<template>
  <Page
    description="资产负债表页面，显示企业在特定时点的财务状况"
    title="资产负债表"
  >
    <!-- 页面顶部栏 -->
    <div class="mb-4 flex items-center justify-between">
      <!-- 左侧公司名称 -->
      <div class="text-lg font-medium text-gray-800">
        北京神州源科技有限公司
      </div>

      <!-- 中间面包屑 -->
      <div class="flex-1 px-4">
        <Breadcrumb>
          <BreadcrumbItem>报表中心</BreadcrumbItem>
          <BreadcrumbItem>资产负债表</BreadcrumbItem>
        </Breadcrumb>
      </div>

      <!-- 右侧操作区 -->
      <div class="flex items-center space-x-2">
        <Button type="primary" @click="handleBackToWorkspace">
          返回工作台
        </Button>
      </div>
    </div>

    <!-- 资产负债表核心功能区 -->
    <div class="rounded-lg bg-white p-6 shadow-sm">
      <!-- 筛选与操作区 -->
      <div class="mb-6 space-y-4">
        <!-- 填列方式和账期选择 -->
        <div class="flex items-center space-x-8">
          <!-- 填列方式 -->
          <div class="flex items-center space-x-4">
            <span class="text-sm font-medium text-gray-700">填列方式：</span>
            <RadioGroup v-model:value="queryForm.reclassification">
              <Radio value="reclassified">重分类</Radio>
              <Radio value="not-reclassified">不重分类</Radio>
            </RadioGroup>
          </div>

          <!-- 账期选择 -->
          <div class="flex items-center space-x-4">
            <span class="text-sm font-medium text-gray-700">账期：</span>
            <DatePicker
              v-model:value="queryForm.accountingPeriod"
              picker="month"
              placeholder="选择账期"
              class="w-40"
              format="YYYY-MM"
            />
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="flex items-center justify-end space-x-2">
          <Button type="primary" @click="handleQuery"> 查询 </Button>
          <Button type="primary" @click="handlePrint">
            <Printer class="mr-1 h-4 w-4" />
            打印
          </Button>
          <Button type="primary" @click="handleDownload">
            <Download class="mr-1 h-4 w-4" />
            下载
          </Button>
        </div>
      </div>

      <!-- 资产负债表表格 -->
      <div class="overflow-x-auto">
        <Table
          :columns="columns"
          :data-source="balanceSheetData"
          :pagination="false"
          size="small"
          bordered
          :scroll="{ x: 1000 }"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'assetItem'">
              <span
                :class="{
                  'font-medium text-gray-900': record.isGroupRow,
                  'pl-4': record.isDetailRow,
                }"
              >
                {{ record.assetItem }}
              </span>
            </template>
            <template v-else-if="column.key === 'assetEndingBalance'">
              <span class="text-right">
                {{ formatAmount(record.assetEndingBalance) }}
              </span>
            </template>
            <template v-else-if="column.key === 'assetBeginningBalance'">
              <span class="text-right">
                {{ formatAmount(record.assetBeginningBalance) }}
              </span>
            </template>
            <template v-else-if="column.key === 'liabilityItem'">
              <span
                :class="{
                  'font-medium text-gray-900': record.isGroupRow,
                  'pl-4': record.isDetailRow,
                }"
              >
                {{ record.liabilityItem }}
              </span>
            </template>
            <template v-else-if="column.key === 'liabilityEndingBalance'">
              <span class="text-right">
                {{ formatAmount(record.liabilityEndingBalance) }}
              </span>
            </template>
            <template v-else-if="column.key === 'liabilityBeginningBalance'">
              <span class="text-right">
                {{ formatAmount(record.liabilityBeginningBalance) }}
              </span>
            </template>
          </template>
        </Table>
      </div>
    </div>
  </Page>
</template>
